﻿
@const HEADER_HEIGHT: 2.4em;
@const CURRENT_BACK: #333;
@const CURRENT_FORE: #fff;
@const DECOLOR: #888;
@const DECOLOR-ALT: #ccc;
@const HIGHLIGHT: morph(highlight,opacity:10%);

@import url(source-code.css);

@mixin TAB {
  padding: 0 1em;
  line-height: @HEADER_HEIGHT;
  text-transform: uppercase;
}

@mixin TAB_CURRENT {
  background: @CURRENT_BACK;
  color: @CURRENT_FORE;
}

@mixin HEADER {
  padding: 0 0.5em;
  line-height: 1.8em;
  //text-transform: uppercase;
  background: #f8f8f8;
}

html { font:system; background: #fff; color:#000;}

body.channels {
  flow:horizontal;
  size:*;
  margin:0;
  padding:0;
}

main {size:*;}

section#channel-view,
section#details-view {
  size:*;
}

[cols] > splitter {
  width:1px;
  background-color: @DECOLOR;
  padding:0;
  border: none;
  hit-margin:3px;
}
[rows] > splitter {
  height:1px;
  background-color: @DECOLOR;
  padding:0;
  border: none;
}

splitter:hover {
  background-color: @DECOLOR;
  outline: 1px solid @DECOLOR; 
}

section.tabs { size:*; }
section.tabs > header 
{
  height: @HEADER_HEIGHT;
  flow: horizontal;
  border-bottom: 1px solid @DECOLOR;
  padding-bottom: -1px;
}
section.tabs > header > label { behavior:button; display:block; height:*; @TAB; }
section.tabs > header > label[current=true] { display:block; @TAB; @TAB_CURRENT; }
section.tabs > header > :not(label) { width:*; line-height: @HEADER_HEIGHT; }
section.tabs > header > caption { width:max-content; display:block; height:*; padding:0 0.25em; }

@set channel-list {
  :root {
    width:64px; 
    height:*;
    padding:3px;
    border-spacing:3px;
    overflow-y: scroll-indicator;
    background:@DECOLOR;
  }

  picture { 
    behavior:button;
    width:*;
    height:64px; 
    foreground-size: contain;
    border:1px solid;
  }

  picture.gone {
    foreground-color: rgba(240,240,240,0.5);
  }

  picture[current=true] { background:highlight; }
}
       
@set channel-log {
  :root {
    font: monospace, system;
    context-menu: selector(menu#for-log-list);
  }

  list {
    display:block;
    overflow:scroll-indicator;
    size:*;
    border-spacing:2px;
  }

  list > li {
    display:block;
    flow:horizontal;
    width:*;
    padding-left:1.4em;
    background-size: 1em 1em;
    background-repeat: no-repeat;
    background-position: 0.2em 0.2em;
    white-space:pre;
    overflow-x: scroll-indicator;
    border-spacing:0.5em 0;  
  }

  list > li.dom { background-color: #FFF8DC; }
  list > li.css { background-color: #FAFFF0; }

  list > li.warning {
    background-image: url(path:M896 128q209 0 385.5 103t279.5 279.5 103 385.5-103 385.5-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103zm128 1247v-190q0-14-9-23.5t-22-9.5h-192q-13 0-23 10t-10 23v190q0 13 10 23t23 10h192q13 0 22-9.5t9-23.5zm-2-344l18-621q0-12-10-18-10-8-24-8h-220q-14 0-24 8-10 6-10 18l17 621q0 10 10 17.5t24 7.5h185q14 0 23.5-7.5t10.5-17.5z);
    fill:#fa6602; 
    color:#b14801;
  }

  list > li.error {
    background-image: url(path:M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z);
    fill:#FF0000;
    color:#FF0000;
  }

  list > li.eval {
    background-image:url(path: M 0 0 L 3 3 L 0 6);
    background-position: top 50% left 0.6em;
    background-size: 0.3em 0.6em;
    stroke:@DECOLOR;
    stroke-width:1px;
    background-color:#f5f5f5;
  }

  list > li > span {
    display:inline-block;
    width:max-content;
  }

  textarea#toeval { 
    display:block;
    width:*;
    height:max-content;
    max-height:4.8em;
    min-height:2.4em;

    overflow:scroll-indicator;
    border:none;
    border-top:1px solid #eee;

    background-repeat:no-repeat;
    background-image:url(path: M 0 0 L 3 3 L 0 6);
    background-position: top 0.6em left 0.6em;
    background-size: 0.3em 0.6em;
    stroke:@DECOLOR;
    stroke-width:1px;
    padding-left:1.2em;
  }

}


@set dom-tree < std-tree {
  :root {
    display:block;
    size:*;
    border:none;
    ovreflow: scroll-indicator;
  }
  option { width:max-content; text-overflow:none; overflow-x:visible;}
  option > caption { line-height:1.4em; height:1.4em; }
  option > caption > span.tag { color:#4169E1; }
  option > caption span.id { display:inline-block; width:max-content; color:#FF0000; }
  option > caption span.class { display:inline-block; width:max-content; color:#2E8B57; }
  option > caption span.type { display:inline-block; width:max-content; color:#8B4513; }
  option > caption span.name { display:inline-block; width:max-content; color:#4B0082; }
  option > caption span.attr { display:inline-block; width:max-content; margin-left:0.6em; color:#008080; }
} 

@set dom-stack {
  :root {
    flow:horizontal;
    height:@HEADER_HEIGHT; line-height: @HEADER_HEIGHT;
    horizontal-align: right;
    padding-left: 0.3em;
  }
  :root > span {  
    display:block;
    background-repeat:no-repeat;
    background-image:url(path: M 0 0 L 3 3 L 0 6);
    background-position: top 50% right 0.45em;
    background-size: 0.3em 0.6em;
    stroke:currentcolor;
    stroke-width:1px;
    padding-right: 1.2em;
  }

  :root > span:hover {
    background-color: @HIGHLIGHT;
  }

  :root > span:last-child { margin-right:*; }
  span.id { display:inline-block; width:max-content; color:#FF0000; }
}


@set files {
  :root {
    size:*;
  }

  :root > select {
    display:block;  
    height:*;
    border:none;
  }

  :root > select > optgroup { @HEADER; }
  :root > select > option { padding: 0 3px; }
}

.url { display:block; width:*; flow:horizontal; white-space:no-wrap; vertical-align:middle; }
.url > .path { display:block; width:*;text-overflow:ellipsis; overflow-x:hidden; }
.url > .filename { display:block; max-width:max-content; width:100*; text-overflow:ellipsis; overflow-x:hidden; }
.url > .lineno { display:block; width:max-content; 
                 line-height:1.2em; border:1px solid; text-decoration:none; padding:0 0.2em; 
                 border-radius:3px; margin:0 0.2em;}

@set file {
  plaintext {
    size:*;
    border:none;
  }

  /*plaintext > text.breakpoint::marker {
    size:1em;
    margin:* * * 0;
  }*/

  figure {
    margin:*;
    width:max-content;
  }

  figure > picture {
    max-width: 50vw;
  }
  figure > form {
    flow:row(label,output);
  }
}

@set element-details {
  :root { 
    size:*; 
    flow: row(dt,dd);
    overflow:scroll-indicator;
    margin:0;
  }

  header { @HEADER; }

  rule {  display:block; 
          background:morph(highlight,opacity:5%); 
          border-top:1px solid #ddd; 
          padding:0 0.5em 0.25em 0.5em; }
  rule.file { flow:horizontal; }
  rule.file > * { display:block; }
  rule.file > .selector { width:*; font-weight:bold; overflow-x:hidden; text-overflow:ellipsis; white-space:nowrap; }
  rule.file > .filename { width: max-content; }
  dt { white-space:nowrap; padding-left:0.5em; width:*; max-width:max-content; overflow-x:hidden; text-overflow:ellipsis;}
  dd { white-space:nowrap; width:2*; max-width:max-content; overflow-x:hidden; text-overflow:ellipsis;}

}

@set element-metrics {

  :root { border-top: 1px solid @DECOLOR; }
  :root > header { text-align: center; }

  div.box {
    flow:grid(1 1 1,
              2 5 3,
              4 4 4);
    width:max-content;
    border: 1px solid #777;
    margin:* * 0 *;    
  }  

  div.padding { background-color:#C3DEB7; }
  div.border { background-color:#FFEEBC; }
  div.margin { background-color:#F9CC9D; }

  div.box var {
    display:block;
    width:max-content;
    min-width:1.2em;
    text-align:center;
    vertical-align:middle;
    padding:0 2px;
  }

  div.inner {
    width:max-content;
    background-color:#FFF;
    border: 1px solid #777;
    white-space:nowrap;
    overflow:none;
    padding:2px;
  }

  div.inner > var { font-weight:bold; display:inline-block; margin:0 2px; min-width:max-content; }

  dl.content { 
    flow:row(dt,dd,dt,dd);
    margin:0 * * *; 
    width:max-content;
  }
  dl.content > dt { white-space:no-wrap; text-align:right; margin:0; padding:0; }
  dl.content > dd { width:max-width; display:block; margin:0; padding:0; }
  dl.content var { font-weight:bold; display:inline-block; margin:0 2px; min-width:max-content; }
}

var.coll {
  display:inline-block;
  border:1px solid #ddd;
} 

var.coll > caption {
  behavior:clickable;
  cursor:pointer;
  padding-left:1.2em;
  padding-right:0.6em;
  background-image: url(path:M1152 896q0 26-19 45l-448 448q-19 19-45 19t-45-19-19-45v-896q0-26 19-45t45-19 45 19l448 448q19 19 19 45z);
  background-size: 0.4em 0.6em;
  background-repeat: no-repeat;
  background-position: 0.6em 0.4em;
  fill:#888;
} 

var.coll[expanded] > caption {
  background-image: url(path:M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z);
  background-size: 0.6em 0.4em;
  background-position: 0.4em 0.6em;
}


var.coll > .details {
  flow:row(span,var);
  padding:3px;
  width:max-content;
}

var.coll[expanded] > .details > span { /* item caption */
  display: block;
  text-align: right;
  width:max-content;
  color: #C71585;
}

var.string {
  display:block;
  white-space:nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis; 
  width: max-content;
  max-width: 20em;
  line-height: 1.2em;
}
var.string::before { content:'"'; }
var.string::after { content:'"'; }

var.null,var.undefined { color:brown; }

